<template>
  <div>
      <home-header></home-header>
      <home-swiper :swiper="swiper"></home-swiper>
      <home-icons :icons="icons"></home-icons>
      <home-other :hotJd="other" :yLike="yLike"></home-other>
      <home-week :week="week"></home-week>
      <home-footer></home-footer>
  </div>
</template>

<script>
  //引入头部组件
  import HomeHeader from '@/pages/Home/Components/Header'
  import HomeSwiper from '@/pages/Home/Components/Swiper'
  import HomeIcons from '@/pages/Home/Components/Icon'
  import HomeOther from '@/pages/Home/Components/Other'
  import HomeWeek from '@/pages/Home/Components/Week'
  import HomeFooter from '@/pages/Home/Components/Footer'
  import axios from 'axios'
    export default {
        name: "Home",
      components:{
          HomeHeader,
          HomeSwiper,
          HomeIcons,
          HomeOther,
          HomeWeek,
          HomeFooter
      },
      data () {//存储页面的各种数据
         return {
           swiper:[],
           icons:[],
           other:[],
           yLike:[],
           week:[],
         }
      },
      methods : {//函数
         getHomeInfo () {
           axios.get('static/mock/index.json').then(this.getSucc)
         },
         getSucc(res){
           res=res.data;
           if(res.ret && res.data){//如果请求到数据 而且 数据中包含data
             const data=res.data;
             this.swiper=data.swiperList;
             this.icons=data.iconList;
             this.other=data.hotJd;
             this.yLike=data.yLike;
             this.week=data.WeekList;
           }
            console.log(res);
         }
      },
      mounted () {//钩子函数 (一般是用来向后端发起请求拿到数据后做一些业务处理)
        this.getHomeInfo();
      }
    }
</script>

<style scoped>
   h1{
   	border:1px solid red;
   }
</style>
